<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.indexedlist.css">
<link rel="stylesheet" href="${ctxStatic }/modules/wx/css/multiPage.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.picker.min.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.poppicker.css">
<link href="${ctxStatic }/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/trip_traval.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/personal_a.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/coupon_total.css" />
<style>
		.mui-input-group{
			background: none;
		}
		.mui-input-group:after{
						background: none;
		}
		.mui-input-row{
			background: #fff;
		}
		.mui-btn-blue{
			border: 1px solid #16C59B;
			background: #16C59B;
		}
	</style>
</head>
<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<div id="trip_traval" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">行程顾问</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper>
					<div class="mui-scroll">
						 <div class="trip_wrap">
						  <form class="mui-input-group" id="queryForm" action="${ctxWx}/trip/toTripTravel" method="post">
						          <input type="hidden" id="typ" name="type"/>
						      <div class="mui-input-row">
						      	  <i class="trip_icos">
						      	  	  <img src="${ctxStatic }/wx/img/day_img/didian_antianbaoche@2x.png" />
						      	  </i>
						          <label>出发城市</label>
						          <input type="hidden" id="cityRecord"/>
						          <input type="hidden" id="spottypes"/>
		                          <input class="departName opt-city-choose citys" data-type="0,b" name="departcity.sitename" type="text" id="depart" value="" placeholder="点击选择出发地" readonly/>
		                          <input class="departCode" name="departcity.siteid" type="hidden"  >
						      </div>
						      <div class="mui-input-row">
						      	  <i class="trip_icos">
						      	  	  <img src="${ctxStatic }/wx/img/day_img/didian_jsj@2x.png" />
						      	  </i>
						          <label>目的地</label>
						          <input type="text" class="destName opt-city-choose" data-type="0,b" placeholder="请选择目的地" name="destcity.sitename">
						          <input class="destCode" name="destcity.siteid" type="hidden">
						      </div>
						      <div class="mui-input-row">
						      	 <i class="trip_icos">
						      	  	  <img src="${ctxStatic }/wx/img/day_img/shijian_dingzhi@2x.png" />
						      	  </i>
						          <label>出发时间</label>
						          <input id="tripstime" type="text" name="tripstime" class="mui-input-clear" placeholder="请选择出发时间">
						      </div>
						      <div class="mui-input-row">
						      	  <i class="trip_icos">
						      	  	  <img src="${ctxStatic }/wx/img/day_img/shijian_antianbaoche@2x.png" />
						      	  </i>
						          <label>结束时间</label>
						          <input id="travaltime" name="travaltime" type="text" class="mui-input-clear" placeholder="请选择结束时间">
						      </div>
						      <div class="mui-input-row">
						      	  <i class="trip_icos">
						      	  	  <img src="${ctxStatic }/wx/img/day_img/ertong_guwen@2x.png" />
						      	  </i>
						          <label>儿童</label>
						          <div class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='10'>
										<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
										<input class="mui-input-numbox" type="number" name="childNum"/>
										<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
									</div>
						      </div>
						      <div class="mui-input-row">
						      	<i class="trip_icos">
						      	  	  <img src="${ctxStatic }/wx/img/day_img/chenren_guwen@2x.png" />
						      	  </i>
						          <label>成人</label>
						          <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
						               <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
						               <input class="mui-input-numbox" type="number" name="adultNum" />
						               <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
						          </div>
						      </div>
						      <div class="mui-input-row">
						          <div class="mui-row">
						          <div class="mui-col-xs-6 trip-check">
						          	  <label>
						          	         <input type="radio" name="tripradio"  value="0"  checked="checked"/>
						                     <span>基础套餐（40元/天）</span>
						              </label>
						          </div>
						          <div class="mui-col-xs-6 trip-check">
						          	     <label>
						          	         <input type="radio" name="tripradio"  value="1" />
						          	         <span>高级套餐（60元/天）</span>
						                 </label>   
						              </div>
						           </div>
						      </div>
						  </form>
						      <div class="trip_btn">
						      	 <button id="sub"  >下一步</button>
						      </div>
						 </div>
					</div>
				</div>
			</div>
		</div>
		<!--选择城市-->
		<div id="city" class="mui-page">
		<div class="city-bar mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
			<a id="close" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
			<h1 class="mui-center mui-title" style="color: #fff;">选择站点</h1>
		</div>
		<div class="mui-page-content">
			<div id="list" class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索站点">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> <a>I</a> <a>J</a> <a>K</a> <a>L</a> <a>M</a> <a>N</a> <a>O</a> <a>P</a> <a>Q</a> <a>R</a> <a>S</a> <a>T</a> <a>U</a> <a>V</a> <a>W</a> <a>X</a> <a>Y</a> <a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul id="indexListContent" class="mui-table-view"></ul>
				</div>
			</div>
		</div>
	</div>
	</body>
	
	<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
	<script src="${ctxStatic }/mui/js/mui.min.js"></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.view.js" ></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.picker.min.js" ></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.dtpicker.js" ></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.indexedlist.js" ></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.poppicker.js" ></script>
		<script type="text/javascript">
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#trip_traval'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			view.addEventListener('pageShow', function(e) {
				if(e.detail.page.id == 'city') {
					document.getElementById('search').focus();
					// 站点数据
					getSiteData();
				}
			});
		})(mui);
		var cityHtml = '';
		var destHtml = '';
		$(function(){
			$('.mui-indexed-list-inner').on('tap', 'li.mui-indexed-list-item', function(event) {
				giveCityData($(this));
			});	
			// 选择城市
			$('.opt-city-choose').on('tap',function(){
				if($(this).hasClass('departName')) {
					 $('#cityRecord').val('depart');
				}
				if($(this).hasClass('destName')) {
					 $('#cityRecord').val('dest');
				}
				$('#spottypes').val($(this).attr('data-type'));
				     viewApi.go('#city');
			});
		});
		// 获取站点数据
		function getSiteData() {
			var spottypes = $('#spottypes').val();
			var loaded = false; // 已加载
			var html = '';		
			if(spottypes == '0,b' && cityHtml != '') {
				loaded = true;
				html = cityHtml;
			}
			if(spottypes == '0,2,b' && destHtml != '') {
				loaded = true;
				html = destHtml;
			}
			if(!loaded){			
				$('#indexListContent').html('<li style="text-align:center;margin:20px;font-size:12px;">加载中...</li>');
				$.post('${ctxWx}/data/site/siteJson',{spottypes:spottypes}, function(data) {
					for(var i=0; i<data.length; i++) {
						var item = data[i];
						html += '<li data-group="'+item.character+'" class="mui-table-view-divider mui-indexed-list-group">'+item.character+'</li>';
						for(var j=0; j<item.list.length; j++) {
							var site = item.list[j];
							html += '<li data-value="'+site.siteid+'" data-name="'+site.sitename+'" data-tags="'+site.querycode +'" class="mui-table-view-cell mui-indexed-list-item">';
							html += site.sitename;
							html += '</li>';
						}
					}
					if(spottypes == '0,b') {
						cityHtml = html;
					}
					if(spottypes == '0,2,b') {
						destHtml = html;
					}
					$('#indexListContent').html(html);
					// 初始化站点数据
					$('#cityStyle').remove();
					var header = document.querySelector('.city-bar');
					var list = document.getElementById('list');
					list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
					new mui.IndexedList(list).search('');
				});
			} else {
				$('#indexListContent').html(html);
				// 初始化站点数据
				$('#cityStyle').remove();
				var header = document.querySelector('.city-bar');
				var list = document.getElementById('list');
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				new mui.IndexedList(list).search('');
			}
		}
		
		// 站点输入框赋值
		function giveCityData(item) {
			var cityRecord = $('#cityRecord');
			if(cityRecord.val() == 'depart') {
				$('.departCode').val(item.attr('data-value'));
				$('.departName').val(item.attr('data-name'));
			} else if(cityRecord.val() == 'dest'){
				$('.destCode').val(item.attr('data-value'));
				$('.destName').val(item.attr('data-name'));
			}else {
				mui.alert('该操作不能正确执行！');
			}
			viewApi.go('#trip_traval');
		}
			Zepto(function(){
				//传值
				$('#sub').on('tap', function(){
					var msg= '';
					var boardaddrName = $('input[name="departcity.sitename"]').val();
					var offaddrName = $('input[name="destcity.sitename"]').val();
					var tripstime = $('#tripstime').val();
					var travaltime = $('#travaltime').val();
					if(boardaddrName == ''){
						msg = '请填写出发地';
					} else if(offaddrName == ''){
						msg = '请填写目的地';
					}else if(tripstime == ''){
						msg = '请填写出发时间';
					}else if(travaltime == ''){
						msg = '请填写结束时间';
					}
					 var stdt = new Date(tripstime.replace("-","/"));  
					 var etdt = new Date(travaltime.replace("-","/"));  
					if(stdt>etdt) {
						msg = '出发时间必须小于结束时间';
					}
					if(msg != ''){
						mui.alert(msg, '提示');
					} else {
						if(isWeiXin()){ //微信打开
							$('#queryForm').submit();
						} else{
							$('#typ').val("notwx");
							$('#queryForm').submit();
						}
					}
				});
				//开始时间
				var start_time_picker = new mui.DtPicker({});
				$('#tripstime').on('tap',function(){
					setTimeout(function(){
						start_time_picker.show(function(items){
							$("#tripstime").val(items.text);
						});
					},200);
				})
				//结束时间
			  var over_time_picker = new mui.DtPicker({});
				$('#travaltime').on('tap',function(){
					setTimeout(function(){
						over_time_picker.show(function(items){
							$("#travaltime").val(items.text);
						});
					},200);
				})
			})
			function isWeiXin(){ 
					var ua = window.navigator.userAgent.toLowerCase(); 
						if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
							return true;
						} else { 
							return false;
						} 
				} 
		</script>
	
</html>